<template>
  <van-text-area
    v-if="!readonly"
    :label="title"
    :label-align="labelAlign"
    :model-value="value"
    :placeholder="`请选择${title}`"
    :required="required"
    :show-tip="showTip"
    readonly
    @click="showPopup"
  />
  <van-cell
    v-else
    :label="vanCellLabel"
    :required="required"
    :title="title"
    :value="vanCellValue"
    @click="showPopup"
  >
    <template v-if="showRequiredTip && showTip && !value" #label>
      <div class="van-field__error-message">{{ `请选择` + title }}</div>
    </template>
  </van-cell>
  <div></div>
  <van-popup v-model:show="showBottom" :style="popupColor" class="popup" closeable position="bottom" round>
    <div style="height: 47vh; overflow: auto">
      <slot name="popup"></slot>
    </div>
    <div>
      <van-cell-group inset>
        <van-cell>
          <slot name="btns"></slot>
          <van-button block size="small" style="margin-top: 1.5vh" type="primary" @click="onConfirm">
            确认
          </van-button>
        </van-cell>
      </van-cell-group>
    </div>
  </van-popup>
</template>

<script lang="ts" setup>
import { FieldTextAlign } from 'vant'
import VanTextArea from '@/framework/components/Vant/VanTextArea.vue'

const props = defineProps<{
  title: string
  value?: string
  popColor?: string
  required?: boolean // 是否为必填项，为true时会显示红色的 *
  showRequiredTip?: boolean // 是否需要展示必填提示
  showTip?: boolean // 是否展示必填提示，一般是出发表单的submit时，将其设置为true即可
  labelAlign?: FieldTextAlign // 对齐方式
  readonly?: boolean
}>()
const { title, value, popColor, required, showRequiredTip, showTip, labelAlign } = toRefs(props)

const showBottom = ref(false)
const popupColor = computed(() => ({ backgroundColor: popColor.value || 'rgb(247, 248, 250)' }))

const emit = defineEmits<{
  (e: 'confirm'): void
  (e: 'onShowSelect'): void
}>()

const showPopup = () => {
  showBottom.value = true
  emit('onShowSelect')
}

const onConfirm = () => {
  emit('confirm')
  showBottom.value = false
}

const vanCellLabel = computed(() => {
  if (labelAlign.value === 'top') return value.value
  else return ''
})

const vanCellValue = computed(() => {
  if (labelAlign.value === 'right' || !labelAlign.value) return value.value
  else return ''
})
</script>
<style scoped>
.popup {
  height: 70vh;
  padding-top: 3rem;
}
</style>
